@import '@/styles/common/variables.scss';
.warranty{
  position: relative;
  min-height: inherit;
  >.el-form{
    height: 100%;
    width: 100%;
    min-height: inherit;
    margin: 0 auto;
    .el-image{
      height: 450px;
      width: 640px;
    }
    .welcome {
      .p1{
        font-weight: 700;
        font-size: 32px;
      }
    }
    >div{
      max-width: 656px;
      margin: 0 auto;
      width: 100%;
      height: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      >div{
        width: 100%;
      }
      &.heightIndex{
        height: 100%;
        min-height: inherit;
        >div{
          // padding:  56px 0 40px;
        }
      }
      .warranty_title_container{
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        i{
          font-size: 12px;
          color: #363434;
          margin-right: 8px;
          position: relative;
          top: 10px;
        }
        .p1{
          font-size: 32px;
          line-height: 32px;
          color: rgb(0, 0, 0);
          font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
          &.center{
            text-align: center;
            margin-bottom: 0px;
          }
          &.email{
            margin-bottom: 8px;
          }
          span{
            font-weight: 700;
          }
  
        }
        .p3{
          font-size: 14px;
          color: #7E7E7E;
          text-align: left;
          margin-top: 8px;
        }
      }

      .btn1{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 32px;
        .readMore{
          span{
            font-size: 24px;
            color: #363434;
          }
        }
        
      }
      .btn2{
        text-align: center;
        margin-top: 64px;
        .el-button{
          width: 100%;
          color: #FFFFFF;
          background-color: #363434;
          border: none;
        }
      }
      .btn3{
        margin-top: 64px;
        .back{
          width: 120px;
        }
        .next{
          width: calc(100% - 120px - 24px);
          margin-left: 24px;
          color: #FFFFFF;
          background-color: #363434;
          border: none;
        }
      }

      .enterPress{
        display: flex;
        align-items: center;
        margin-top: 16px;
        .el-button{
          position: relative;
          font-family: inherit;
          font-weight: 700;
          cursor: pointer;
          transition-duration: 0.1s;
          transition-property: background-color, color, border-color, opacity, box-shadow;
          transition-timing-function: ease-out;
          outline: none;
          border: 1px solid transparent;
          margin: 0px;
          box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 12px 0px;
          padding: 6px 14px;
          min-height: 40px;
          background-color: rgb(208, 60, 51);
          color: rgb(255, 255, 255);
          border-radius: 4px;
        }
        >p{
          margin-left: 12px;
          font-size: 12px;
          line-height: 16px;
          color: rgb(0, 0, 0);
          span{
            font-weight: 700;
          }
        }
      }
      &.welcome{
        max-width: 100%;
        text-align: center;
        .enterPress{
          justify-content: center;
        }
      }
      .el-select{
        width: 100%;
      }
      .el-button.is-disabled{
        background-color: #CDCDCD;
      }
    }
  }
  >.contronal{
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 100%;
    text-align: center;
    .el-progress{
      width: 160px;
      margin: 0 auto;
      .el-progress-bar__outer{
        border-radius: 0;
        background-color: #F2F1F0
      }
      .el-progress__text{
        font-size: 12px !important;
        color: #7E7E7E;
        margin-top: 8px;
        margin-left: 0;
      }
      .el-progress-bar{
        padding: 0;
        margin: 0;
      }
    }
    // >div{
    //   margin-top: 24px;
      // >span{
      //   display: inline-block;
      //   width: 40px;
      //   height: 40px;
      //   text-align: center;
      //   line-height: 40px;
      //   background-color: #363434;
      //   cursor: pointer;
      //   border-radius: 4px;
      //   i{
      //     color: #FFFFFF;
      //     font-size: 18px;
      //   }
      //   &:first-of-type{
      //     margin-right: 8px;
      //   }
      //    &:last-of-type{
      //     margin-left: 8px;
      //     i{
      //       -webkit-transform: rotateZ(180deg);
      //       transform: rotateZ(180deg);
      //       display: inline-block;
      //     }
      //   }
      //   &.disabled{
      //     background-color: #CDCDCD;
      //   }
      // }
    // }
  }
  >.btn_container{
    span{
      display: inline-block;
      width: 72px;
      height: 72px;
      text-align: center;
      line-height: 66px;
      // background-color: #363434;
      cursor: pointer;
      position: absolute;
      top: 50%;
      margin-top: -36px;
      border: 3px solid transparent;
      i{
        color: #7E7E7E;
        font-size: 16px;
      }
      &:hover{
        border-radius: 50%;
        border-color: #363434;
        i{
          color: #363434;
        }
      }
      &:first-of-type{
        left: 80px;
        i{
          -webkit-transform: rotateZ(180deg);
          transform: rotateZ(180deg);
          display: inline-block;
        }
      }
       &:last-of-type{
        right: 80px;

      }
      &.disabled{
        cursor: not-allowed;
        i{
          color: #F2F1F0;
        }
        &:hover{border-color: transparent;}
        // background-color: #CDCDCD;
      }
    }
  }

  .el-form-item{
    position: relative;
    margin-top: 24px;
    .el-input__inner{
      height: 56px;
      line-height: 56px;
      // padding-top: 18px;
    }
    .el-input:focus~.form_label{
      top: 8px;
      font-size: 12px;
      // line-height: 1.75;
    }
    select.form_textbox_enter~.form_label,
    select:focus~.form_label,
    input.form_textbox_enter~.form_label,
    input:focus~.form_label{
      top: 8px;
      font-size: 12px;
      // line-height: 1.75;
    }
    .el-form-item__content>select {
      background-color: #FFFFFF;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #DCDFE6;
      box-sizing: border-box;
      color: #363434;
      display: inline-block;
      font-size: inherit;
      outline: none;
      padding: 18px 15px 0;
      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      width: 100%;
      height: 56px;
    }
    .el-form-item__content>input{
      -webkit-appearance: none;
      background-color: #FFFFFF;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #DCDFE6;
      box-sizing: border-box;
      color: #363434;
      display: inline-block;
      font-size: inherit;
      outline: none;
      padding: 18px  15px 0;
      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      width: 100%;
      height: 56px;
      line-height: 56px;
    }
    .form_label{
      position: absolute;
      top: 18px;
      left: 17px;
      color: #888;
      padding: 0;
      z-index: 1;
      transition-timing-function: ease-in;
      transition-duration: .125s;

      font-size: 16px;
      line-height: 1.23543;
      font-weight: 400;
    
    }
    &.is-error {
      input{
        border-color: #DF3A32;
        background-color: #FFF2F4;
        color: #DF3A32;

      }
      .form_label{
        color: #DF3A32;
      }
    }

  }

}


.warranty{
  @include respond('768'){
    padding:  0 20px;
    margin-top: $menuPhoneHeight + 20px;
    > .el-form {
      >div{
        .btn3,.btn2{
          margin-top: 24px;
          margin-bottom: 40px;
          .back{
            width: 96px;
          }
          .next{
            width: calc(100% - 96px - 24px);
          }
        }
        &.welcome {
          .p1{
            font-size: 20px;
            font-weight: normal;
          }
        }
        &.heightIndex{
          >div{
            padding: 0px 0;
          }
        }
        .btn1 {
          margin: 40px 0;
          .readMore{
            span{
              font-size: 14px;
            }
            i{
              width: 32px;
              height: 20px;
              border-width: 1px;
              &::before{
                line-height: 20px;
              }
            }
          } 
  
        }
        .p3{
          margin-top: 4px;
        }

        .warranty_title_container {
          .p1{
            font-size: 20px;
          &.email{
            margin-bottom: 4px;
          }}
          
        }
        
      }
      .el-image{
        width: 100%;
        height: 238px;
      }
      .el-form-item{
        margin-bottom: 40px;
      }

    }
    > .contronal{
      bottom: 16px;
      position: relative;
      bottom: 0;
      .el-progress{
        width: 240px;
        .el-progress__text{
          font-size: 14px !important;
        }
      } 
    }
    .btn_container{
      margin: 24px 0 40px;
      text-align: center;
      span{
        position: relative;
        width: 32px;
        height: 32px;
        line-height: 32px;
        margin-top: -16px;
        border: 1px solid transparent;
        font-size: 0;
        i{font-size: 12px;}
        &:last-of-type{
          right: 0;
          margin-left: 8px;
        }
        &:first-of-type{
          left: 0;
          margin-right: 8px;
        }
        &:hover{
          border-color: transparent;
        }

      }
    }
  }
}